﻿@{
    ViewBag.SubTitle = "卡券";
    Layout = "~/Views/Shared/_LayoutBlank.cshtml";
}

<style type="text/css">
   body {
        /*margin-top: 1.5rem;*/
         margin-top: 1.2rem;
        margin-bottom: 0.55rem;
    }

    #divTopTitleBar {
        position: fixed;
        left: 0rem;
        right: 0rem;
        /*top: 1rem;*/
         top:0.7rem;
        height: 0.4rem;
        background-color: white;
    }

    .divBillTitle {
        font-size: 0.13rem;
    }

    .divBillDateTime {
        font-size: 0.13rem;
    }

    .divPointIncrement {
        color: #FF541B;
        font-weight: bold;
        font-size: 0.16rem;
    }

    .divPointDecrement {
        color: #00B200;
        font-weight: bold;
        font-size: 0.16rem;
    }

    #divFooter {
        position: fixed;
        bottom: 0px;
        left: 0px;
        right: 0px;
        height: 0.4rem;
        font-size: 0.14rem;
        text-align: center;
        background-color: #F5F5F5;
    }

    .divCouponLeft {
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -o-box-sizing: border-box;
        color: white;
        text-align: center;
        padding-top: 0.1rem;
        padding-bottom: 0.1rem;
        border-radius: 0.07rem 0 0 0.07rem;
        height: 0.7rem;
        display: table;
    }

    .divCouponRight {
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -o-box-sizing: border-box;
        background-color: #F5F5F5;
        height: 0.7rem;
        border-radius: 0 0.07rem 0.07rem 0;
        display: table;
        padding-left: 0.1rem;
        background-image: url(Content/Images/coupon_bg.png);
        background-repeat: no-repeat;
        background-position: right bottom;
    }
</style>

<script>

    var _status = 0;

    //当前页
    var _currentPage = 1;
    var _totalPage = 1;

    $(document).ready(function () {
        loadData();
    });

    function loadData(targetPage) {
        if (targetPage > _totalPage)
            return;

        var loadLayerIndex = layer.open({
            type: 2,
            shadeClose: false,
            content: '请稍候...'
        });

        var args = new Object();
        args.Page = targetPage || 1;
        args.PageSize = 10;
        args.Status = _status;

        $.ajax({
            url: "/Api/Coupon/GetMemberCouponList/@ViewBag.Domain.Id",
            type: "POST",
            dataType: "json",
            data: JSON.stringify(args),
            success: function (data, status, jqXHR) {
                // alert(data);

                layer.close(loadLayerIndex);
                if (data.Success) {
                    var resultObj = data.Data;

                    _currentPage = resultObj.Page;
                    _totalPage = resultObj.TotalPage;
                    if (_currentPage >= _totalPage) {
                        $("#divPagingContainer").html("没有更多了");
                    }

                    if (_currentPage == 1) {
                        document.getElementById('couponListContainer').innerHTML = "";
                    }

                    //alert(JSON.stringify(resultObj));
                    var gettpl = document.getElementById('couponListTemplate').innerHTML;
                    laytpl(gettpl).render(resultObj.ItemList, function (html) {
                        document.getElementById('couponListContainer').innerHTML += html;
                    });



                } else {
                    layerAlert(data.Message);
                }
            },
            error: function (xmlHttpRequest) {
                layer.close(loadLayerIndex);
                //alert("Error: " + xmlHttpRequest.status);
            }
        });
    }

    function loadDataByStatus(status) {

        $("#tableSwitch input[statusswitch]").each(function (index, element) {

            if ($(element).attr("status") == status) {
                $(element).attr("class", "button");
            } else {
                $(element).attr("class", "button_gray");
            }
        });

        _status = status;
        loadData();
    }


</script>

<script id="couponListTemplate" type="text/html">

    {{# for(var i = 0, len = d.length; i < len; i++){ }}

    <div style="margin-top:0.1rem;" onclick="goUrl('/Home/CouponDetail/@ViewBag.Domain.Id?recordId={{ d[i].Id }}&serialNumber={{ d[i].SerialNumber }}')">
        <div class="divCouponLeft" style="width:10%; float:left;background-color:#E67D88">
            <div style="display:table-cell;vertical-align:middle;font-size:0.12rem;line-height:0.14rem;">
                @*兑<br />换<br />券*@
            </div>
        </div>
        <div class="divCouponRight" style="width:90%;float:left;">
            <div style="display:table-cell;vertical-align:middle;">
                <div style="font-size:0.14rem;color:#DF5966;font-weight:bold">{{ d[i].CouponName }}</div>
                {{# if(d[i].LimitedTime != null){ }}
                <div style="color:#878787;margin-top:0.1rem;">有效期：{{ d[i].LimitedTime }}</div>
                {{# } }}
            </div>
        </div>
        <div style="clear:both"></div>
    </div>

    {{# } }}

</script>

@Helpers.HeaderArea(ViewBag, "coupon")

<div id="divTopTitleBar">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" style="height:100%">
        <tr style="height:0.27rem;">
            <td width="33%" align="center"><div onclick="goUrl('/Home/PointAccount/@ViewBag.Domain.Id')">积分账户</div></td>
            <td width="33%" align="center"><div onclick="goUrl('/Pay/CashAccountTrack/@ViewBag.Domain.Id')">现金账户</div></td>
            <td width="33%" align="center"><div onclick="goUrl('/Home/Coupon/@ViewBag.Domain.Id')">我的卡券</div></td>
        </tr>
        <tr style="height:0.03rem;">
            <td bgcolor="#E4E4E4"></td>
            <td bgcolor="#E4E4E4"></td>
            <td class="defaultBgColor"></td>
        </tr>
    </table>
</div>

<div class="divContent" style="margin-top:0.2rem;">
    @*<div style="margin-top:0.5rem; font-size:0.14rem; text-align:center;">
            <table id="tableSwitch" align="center" border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td>
                        <div class="divOrderBySelected" status="0" statusswitch onclick="loadDataByStatus(0)">
                            未使用
                        </div>
                    </td>
                    <td style="width:0.1rem;">&nbsp;</td>
                    <td>
                        <div class="divOrderBy" status="1" statusswitch onclick="loadDataByStatus(1)">
                            已使用
                        </div>
                    </td>
                </tr>
            </table>
        </div>*@

    <div id="couponListContainer">

    </div>

    <div id="divPagingContainer" class="divPagingContainer" style="margin-top:0.2rem; text-align:center" onclick="loadData(_currentPage + 1)">
        查看更多
    </div>
</div>

<div id="divFooter">
    <table id="tableSwitch" align="center" style="height:100%;width:100%" border="0">
        <tr>
            <td width="50%" align="center">
                <input name="" type="button" class="button" value="未使用" style="width:90%;font-size:0.14rem;" status="0" statusswitch onclick="loadDataByStatus(0)">
            </td>
            <td width="50%" align="center">
                <input name="" type="button" class="button_gray" value="已使用" style="width:90%;font-size:0.14rem;" status="1" statusswitch onclick="loadDataByStatus(1)">
            </td>
            <td width="33%" align="center">
                @*<input name="" type="button" class="button_gray" value="已过期" style="width:90%;font-size:0.14rem;">*@
            </td>
        </tr>
    </table>
</div>